<template>
    <div class="songdetails">
        <div class="top">
            <router-link to="/"><van-icon name="wap-home-o" color="red"/></router-link>
            <p>{{songDetail.title}}<br><span>{{songDetail.author}}</span></p>
            <van-icon name="search"/>
        </div>
        <div class="middle">
            <div :style="{'animation-play-state':animationPlayState}" style="animation-play-state: running"><img
                    :src="songDetail.pic_radio"
                    alt=""  @click="turn" ></div>
            <div class="song">
                <ul ref="list">
                    <li v-for="(item,index) in lrcContent" :key="index" :class="index == active?'active1':''" @click="changeSong(item.time)">{{item.content}}</li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div>
<!--                <router-link to=""></router-link>-->
                <van-icon name="like-o" v-show="borderLove"  @click="changColor"/>
                <van-icon name="like" color="red" v-show="shiLove" @click="dele"/>
                <a :href="songDetail.lrclink"> <van-icon name="down" /></a>
            </div>
            <div>
                <audio autoplay :src="bbnn.show_link"
                       controls ref="audio" loop></audio>
            </div>
        </div>
<!--        <div>{{this.$route.query.songid}}</div>-->
    </div>
</template>

<script>
    import {getSongDetail} from "../api/InterFacelibrary.js"
    import { Dialog } from 'vant';
    import { Toast } from 'vant';
    export default {
        name: "SongDetails.vue",
        data() {
            return {
                songDetail:[],
                animationPlayState:"paused",
                content:  "[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n",
                animationShow:"running",
                borderLove:true,
                shiLove: false,
                lrcContent:[],
                currentTime:0,
                active:0,
                noScroll:false,
                bbnn:[],
                myLoveList:[]
            }
        },
        created() {
            this.myLoveList = JSON.parse(localStorage.getItem("name")) || []
            // console.log(this.$route.query.songid)
            getSongDetail(this.$route.query.songid).then(res => {
                console.log(res)
                this.songDetail = res.songinfo
                this.bbnn=res.bitrate

            });


            //    处理歌词
            let lyrics = this.content.split("\r\n")

            // console.log(lyrics)
            // 判断一下我们这个字符串有没有时间
            let reg = /\[\d*:\d*\.\d*\]/g;
            lyrics.forEach(item => {
                let content = item.match(reg);

                // console.log(content)
                // match
                if (content) {
                    // 匹配到了内容，在这个时候再做后续的处理
                    content.forEach(timeItem => {
                        // console.log(item)

                        let min = Number(timeItem.match(/\[\d*/)[0].replace("[", ""));
                        let sec = Number(timeItem.match(/:\d*/)[0].replace(":", ""));
                        // 最终的秒数
                        let time = min * 60 + sec;
                        let contentStr = item.replace(reg, "");
                        if (contentStr) {
                            this.lrcContent.push({
                                time:time,
                                content: contentStr
                            })
                        }
                    })
                }
            })

        },

        methods: {
            changColor(){
                //改变颜色的功能
                this.borderLove=!this.borderLove
                this.shiLove=!this.shiLove


                this.myLoveList.push(this.songDetail.song_id)
                this.myLoveList=this.myLoveList.filter((x, index,self)=>self.indexOf(x)===index)
                console.log(this.myLoveList)
                localStorage.setItem("name", JSON.stringify(this.myLoveList))
                Toast({
                    message: '感谢收藏',
                    icon: 'like-o',
                });
            },
            dele(){

                Dialog.confirm({
                    title: '确定从我喜欢中删除这首歌？',
                    message: '请选择',
                })
                    .then(() => {
                        this.borderLove=!this.borderLove
                        this.shiLove=!this.shiLove
                      this.myLoveList=this.myLoveList.filter(item=> item!=this.songDetail.song_id)
                        console.log(this.myLoveList)
                        localStorage.setItem("name", JSON.stringify(this.myLoveList))

                    })
                    .catch(() => {

                    });
            },
            changeSong(time){
                this.$refs.audio.currentTime = time
            },
            turn(){
                if(this.animationPlayState == 'paused'){
                    this.animationPlayState = 'running';
                    this.$refs.audio.play();
                }else {
                    this.animationPlayState = 'paused';
                    this.$refs.audio.pause();
                }

            },
        },
        watch:{
            currentTime() {
                // console.log(this.currentTime)
                // 根据这个时间判断激活的歌词是哪一个

                // 普通for循环
                for (let i = 0; i < this.lrcContent.length; i++) {
                    if (this.lrcContent[i].time > this.currentTime) {
                        if (i > 0) {
                            this.active = i - 1;
                        }

                        if (!this.noScroll) {
                            this.$refs.list.scrollTop = this.$refs.list.children[this.active].offsetTop - 50 ;


                            // console.log(this.$refs.list.children[this.active].offsetTop)
                        }
                        break;
                    }
                }
            }
        },
        mounted() {

            this.$refs.audio.addEventListener("timeupdate",()=>{
                // console.log(this.$refs.audio.currentTime)
                this.currentTime = this.$refs.audio.currentTime
            });
            this.$refs.audio.addEventListener("play",  ()=> {   //开始播放时触发
                this.animationPlayState = 'running';
            });
            this.$refs.audio.addEventListener("pause",  ()=> {   // 暂停时会触发，当播放完一首歌曲时也会触发
                this.animationPlayState = 'paused'
            })

            //    触摸歌词停止滚动
            this.$refs.list.addEventListener("touchstart", () => {
                if (this.timeoutId) {
                    clearTimeout(this.timeoutId);
                }
                this.noScroll = true;
            });
            this.$refs.list.addEventListener("touchend", () => {
                this.timeoutId = setTimeout(() => {
                    this.noScroll = false
                }, 2000)
            });

        }

    }
</script>

<style scoped lang="less">
    .songdetails {
        width: 100%;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
            font-size: 25px;
            margin: 10px;
        }

        p {
            text-align: center;
            /*margin-top: 5px;*/

            span {
                font-size: 10px;
            }

        }
    }

    .middle {
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            margin: 10px auto;

            animation: spin 12s linear infinite;
            /*animation-play-state:paused;*/
            animation-play-state:running;
        }

        div:nth-child(1) img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        div:nth-child(2) {
            /*width: 300px;*/
            height: 200px;
            margin: 20px auto;
            overflow: scroll;
            text-align: center;

            p {
                width: 200px;
                margin: auto;
            }
        }

    }

    .bottom {
        div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            align-items: center;

            i {
                font-size: 25px;
                margin: 20px 20px;
            }
        }

        div:nth-child(2) {
            text-align: center;

            audio {

            }
        }
    }
    @-webkit-keyframes spin {
        to {
            transform: rotate(1turn);
        }
    }
    .song {
        ul{
            position: relative;
            overflow: scroll;
            height: 190px;
        }
        li{
            text-align: center;
        }

    }
    .active1 {
        color: #ff0000;
        font-size: 18px;
    }
</style>